<template>
    <section class="add-box">
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="80px">
            <el-card >
                <div slot="header" class="add-title">广告信息</div>
                <el-form-item label="名称" prop="name">
                    <el-input class="form-item-w" v-model="formData.name" placeholder="请输入广告名称"></el-input>
                </el-form-item>
                <el-form-item label="图片" prop="img">
                    <div class="upload-box _display_flex">
                        <div class="upload-item">
                            <div class="avatar-uploader avatar _display_flex" @click="handleUpload">
                                <img v-if="img_url" :src="img_url" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon avatar"></i>
                            </div>
                            <i class="upload-tab">【点击更换图片】</i>
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="路径" prop="url">
                    <el-input class="form-item-w" v-model="formData.url" placeholder="请输入跳转路径"></el-input>
                </el-form-item> 
                <el-form-item label="说明" prop="remark">
                    <el-input class="form-item-w" v-model="formData.remark" placeholder="请输入说明"></el-input>
                </el-form-item> 
                <el-form-item label="启动" prop="remark">
                    <el-radio v-model="formData.start" :label="0">否</el-radio>
                    <el-radio v-model="formData.start" :label="1">是</el-radio>
                </el-form-item> 
            </el-card>
            <!-- 操作 -->
            <div class="buttom _display_flex">
                <el-button type="success" @click="validateForm">确定</el-button>
                <el-button type="info" @click="resetForm">重置</el-button>
            </div>
        </el-form>

        <!-- 上传弹窗 -->
        <el-dialog title="上传图片"  :visible.sync="dialogVisible"  width="40%">
            <el-tabs type="border-card">
                <el-tab-pane label="网路图片">
                    <div class="_display_flex">
                        <el-input v-model="network_url" placeholder="请输入网路路径" ></el-input>
                        <el-button type="primary" plain class="tabs-button" @click="networkConfirm">确定</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="本地图片">
                    <el-button type="success"  class="tabs-button" @click="nativeUpload">上传</el-button>
                </el-tab-pane>
            </el-tabs>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
export default {
    name: 'AdverDetails',
    title: '新增广告',
    methods: {
        // 上传
        handleUpload() {
            this.dialogVisible = true
        },
        // 网路上传确定
        networkConfirm() {
            this.formData.img = this.network_url
            this.img_url = this.network_url
            this.dialogVisible = false
        },
        // 本地上传
        nativeUpload() {
            this.$Upload({
                show: true,
                leng: 1,
                callback: (data) => {
                    this.formData.img =  data[0]
                    this.img_url = this.path + data[0]
                    this.dialogVisible = false
                }
            })
        },
        // 重置
        resetForm() {
            this.img_url = null
            this.$refs['ruleForm'].resetFields();
        },
        // 确定新增
        validateForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.submitForm()
                } else {
                    return false;
                }
            });
        },
        // 提交表单
        async submitForm() {
            const data = this.formData
            const res = await this.$Http.getAdverAddRedact({ data })
            if(res) {
                setTimeout(() => {
                    this.$router.push({
                        path: '/market/adver_list'
                    })
                }, 1000)
            }
        },
        // 详情
        async getAdverDetails() {
            const data = { id: this.$route.params.id }
            const res = await this.$Http.getAdverDetails({ data })
            if(res) {
                this.formData = res
                this.img_url = this.path + res.img
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            network_url: '',
            img_url: '',
            formData: {
                name: '',
                img: '',
                url: '',
                remark: '',
                start:0
            },
            rules: {
                name: [
                    { required: true, message: '请输入广告名称', trigger: 'blur' },
                ],
                img: [
                    { required: true, message: '请上传图片', trigger: 'blur' },
                ],
                url: [
                    { required: true, message: '请输入跳转连接', trigger: 'blur' },
                ],
            }
        }
    },
    mounted() {
        // 加载详情
        this.$route.params.id && this.getAdverDetails()
    }
}
</script>

<style lang="scss" scoped>
    .add-box{
        width: 100%;
    }
    .form-item-w{
        width: 300px;
    }
    .upload-box{
        .upload-item{
            margin-right: 10px;
            flex-direction: column;
        }
        .upload-tab{
            font-size: $font-size-xs;
            color: $text-color-grey;
        }
        .avatar-uploader{
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            justify-content: center;
            &:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                text-align: center;
            }
        }
        .avatar {
            width: 100px;
            height: 100px;
            line-height: 100px;
        }
    }
    .buttom{
        justify-content: center;
        margin-top: 20px;
    }
    .tabs-button{
        margin-left: 20px;
    }
</style>